<template>
  <div class="MeetList">
    <el-card shadow="hover" class="conferenceHeader">
      <el-form :model="queryForm" :ref="queryForm" label-width="80px">
        <el-row :span="24" type="flex" style="width: 90%; margin: auto">
          <!--校区-->
          <el-col :span="8">
            <el-form-item label="校区" label-width="80px">
              <el-select v-model="queryForm.campus" placeholder="请选择校区" @change="fetch">
                <el-option
                    :value="null"
                    label="全部校区"
                    style="text-align: center"
                ></el-option>
                <el-option
                    v-for="item in campusList"
                    :key="item.id"
                    :label="item.campusName"
                    :value="item.id"
                    style="text-align: center"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="审批状态" label-width="80px">
              <el-select
                  v-model="queryForm.approvalStatus"
                  placeholder="请选择审查状态"
                  @change="fetch"
              >
                <el-option label="全部状态" :value="null"></el-option>
                <el-option label="未审批" :value="0"></el-option>
                <el-option label="已通过" :value="1"></el-option>
                <el-option label="未通过" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="会议名称" label-width="80px">
              <el-input
                  placeholder="请输入会议主题"
                  @keydown.enter="fetch"
                  v-model="queryForm.topic"
              >
                <template v-slot:prefix>
                  <el-icon>
                    <el-icon-search/>
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-card shadow="hover" class="conferenceTable">
      <el-button
          style="width: 15% ;padding-bottom: 8px"
          v-for="button in buttons"
          :key="button.text"
          :type="button.id=== queryForm.timeStatus? 'primary':''"
          :class="button.id === queryForm.timeStatus? 'selected tag-button':'tag-button'"
          @click="changeList(button.id)"
          link
      >
        {{ button.text }}
      </el-button>
      <el-table stripe :data="tableData" style="margin-top: 20px">
        <el-table-column prop="topic" label="会议主题" min-width="240"/>
        <el-table-column prop="conferenceDate" label="会议日期" min-width="100"/>
        <el-table-column label="时间" min-width="120">
          <template v-slot="scope">
            {{ scope.row.startTime }}-{{ scope.row.endTime }}
          </template>
        </el-table-column>
        <el-table-column prop="campus" label="校区" min-width="100">
          <template v-slot="scope">
            {{ getCampusName(scope.row.campus) }}
          </template>
        </el-table-column>
        <el-table-column prop="conferenceRoomId" label="会议室" min-width="180">
          <template v-slot="scope">
            {{ getRoomName(scope.row.conferenceRoomId) }}
          </template>

        </el-table-column>

        <el-table-column label="配置" min-width="90px">
          <template v-slot="scope">
            <el-button
                text
                @click="showConfig(scope.row)"
                class="fun-button"
            >
              查看
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="approvalStatus" label="审核状态" min-width="100">
          <template v-slot="scope">
            <el-tag :type="getReviewTagType(scope.row.approvalStatus)">
              {{ getApprovalStatus(scope.row.approvalStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            min-width="180px"
            prop="operation"
            label="操作"
            v-if="role === '1'">
          <template v-slot="scope">
            <div v-if="scope.row.approverId">
              处理人：{{ scope.row.approverName }}
            </div>
            <div v-else>
              <el-button
                  v-if="isBeforeEndTime(scope.row.conferenceDate, scope.row.endTime)"
                  text
                  size="small"
                  class="fubutton"
                  @click="approve(scope.row)"
              >
                <img src="@/assets/icon/check mark.png" alt=""/>
              </el-button>

              <el-button
                  text
                  size="small"
                  class="fubutton"
                  @click="reject(scope.row)"
              >
                <img src="@/assets/icon/X mark.png" alt=""/>
              </el-button>

            </div>

          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="queryForm.total"
          :page-size="queryForm.pageSize"
          :page-sizes="[5, 10]"
          :current-page="queryForm.pageNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </el-card>


  </div>
</template>

<script>
import {Search as ElIconSearch} from '@element-plus/icons'
import {FetchConferences, UpdateApprovalStatus} from "@/api";
import SummaryDetails from "@/components/SummaryDetails.vue";

export default {
  components: {
    SummaryDetails: SummaryDetails,
    ElIconSearch,
  },
  data() {
    return {
      queryForm: {
        campus: this.$store.getters.getUserCampus,
        approvalStatus: '',
        topic: '',
        timeStatus: 0,
        pageNum: 1,
        total: 0,
        pageSize: 5,
      },
      tableData: [],
      buttons:
          [
            {type: 'primary', text: '全部会议', id: 0},
            {type: '', text: '待开始的会议', id: 1},
            {type: '', text: '进行中的会议', id: 2},
            {type: '', text: '本日召开的会议', id: 3},
            {type: '', text: '已结束的会议', id: 4},
          ],
    }
  },
  methods: {
    handleSizeChange(value) {
      this.queryForm.pageSize = value;
      this.fetch();
    },
    handleCurrentChange(value) {
      this.queryForm.pageNum = value
      this.fetch();
    },

    getCampusName(campusId) {
      const campus = this.campusList.find((item) => item.id === campusId)
      return campus ? campus.campusName : '未知校区'
    },
    getRoomName(roomId) {
      const room = this.conferenceRoomList.find((item) => item.id === roomId);
      return room ? room.roomName : '未知房间'
    },
    showConfig(row) {
      this.$router.push({
        name: 'ConferenceReservations',
        query: {
          status: 'check',
          conferenceId: row.id,
        },
      });
    },
    changeList(id) {
      this.queryForm.timeStatus = id
      this.fetch()
    },
    fetch() {
      FetchConferences(this.queryForm).then((response) => {
        if (response.code === 200) {
          this.tableData = response.data.rows
          this.queryForm.total = +response.data.total
        }
      })
    },
    getReviewTagType(status) {
      switch (status) {
        case 1:
          return 'success'
        case 2:
          return 'danger'
        default:
          return 'warning'
      }
    },
    isBeforeEndTime(date, endTime) {
      const currentTime = new Date() // 获取当前时间
      const endTimeDate = new Date(`${date} ${endTime}`) // 将日期和时间字符串拼接后转换为日期对象
      return currentTime < endTimeDate // 判断当前时间是否在结束时间之前
    },
    getApprovalStatus(ApprovalStatus) {
      if (ApprovalStatus === 0) {
        return '待审核'
      } else if (ApprovalStatus === 1) {
        return '审核通过'
      } else if (ApprovalStatus === 2) {
        return '审核未通过'
      }
    },
    approve(row) {
      const params = {
        id: row.id,
        approvalStatus: 1,
      }
      UpdateApprovalStatus(params)
          .then((response) => {
            if (response.code === 200) {
              this.fetch()
            }
          })
    },
    reject(row) {
      const params = {
        id: row.id,
        approvalStatus: 2,
      }
      UpdateApprovalStatus(params)
          .then((response) => {
            if (response.code === 200) {
              this.fetch()
            }
          })
    },
  },
  created() {
    this.fetch()
  },
  computed: {
    campusList() {
      return this.$store.getters.getCampusList;
    },
    conferenceRoomList() {
      return this.$store.getters.getConferenceRoomList;
    },
    role() {
      return this.$store.getters.getRole;
    },
  },
}
</script>
<style>

</style>
<style lang="less" scoped src="@/assets/style/ConferenceManagement.less"></style>
